<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <span>
          <b class="u-f-16">团购商品列表</b>
        </span>
        <div class="u-right u-5mt">
          <el-button
            type="danger"
            size="small"
            icon="el-icon-document-checked"
            @click="handleAddGoods()"
          >添加商品</el-button>
          <el-button
            size="small"
            icon="el-icon-back"
            style="margin-left: 20px;"
            @click="$router.go(-1)"
          >返回</el-button>
        </div>
      </div>
      <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
        <el-form-item :label="'活动名称：'+other.name"></el-form-item>

        <el-form-item label="状态">
          <el-select v-model="queryForm.status" clearable>
            <el-option label="全部" value></el-option>
            <el-option label="上线" value="1"></el-option>
            <el-option label="下线" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="queryForm.keyword" placeholder="商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" class="u-mt-10" v-viewer>
        <el-table-column label="id" prop="id" width="60"></el-table-column>
        <el-table-column label="商品id" prop="goods_id" width="60"></el-table-column>
        <el-table-column label="商品名称" prop="goods_title"></el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image
              style="max-width: 60px;"
              :src="scope.row.goods_img"
              :data-src="scope.row.goods_img"
              fit="cover"
              lazy
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="平台售价" prop="goods_bazaar_price"></el-table-column>
        <el-table-column label="活动价格" prop="sell_price"></el-table-column>
        <el-table-column label="活动条件" prop="condition"></el-table-column>
        <el-table-column label="有效时间/小时" prop="condition_time"></el-table-column>
        <el-table-column label="商品库存" prop="goods_storage"></el-table-column>
        <el-table-column label="是否上线">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              active-color="#13ce66"
              @change="handleStatus(scope.row.id,scope.row.status)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleStore(scope.row.id,scope.row.goods_title)">
                  <el-button size="mini" type="text">出/入库</el-button>
                </el-dropdown-item>
                <el-dropdown-item @click.native="dialogListOpen(scope.row.goods_id)">
                  <el-button size="mini" type="text">库存记录</el-button>
                </el-dropdown-item>
                <el-dropdown-item @click.native="editGoods(scope.row.id)">
                  <el-button size="mini" type="text">编辑</el-button>
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="handleDelete(scope.row.id)"
                  v-if="hasPerm('activityGoodsDelBtn')"
                >
                  <el-button size="mini" type="text">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="u-mt-20 u-text-center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 商品弹出框 -->
    <el-dialog title="添加商品" width="65%" :visible.sync="is_goods_show" v-if="is_goods_show">
      <Edit
        :aid="aid"
        :id="item_id"
        :time="other.condition_time"
        @submit="closeAddGoods()"
        ref="goodsref"
      ></Edit>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_goods_show = false">取 消</el-button>
        <el-button type="primary" @click="addGoods()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 库存修改 -->
    <el-dialog title="出入库操作" :visible.sync="is_store_show" v-if="is_store_show" width="35%">
      <el-form label-width="100px" class="u-form">
        <div style="margin-left: 100px;padding: 12px;">{{store.goods_title}}</div>
        <el-form-item label="操作状态">
          <el-radio v-model="store.change" label="add">入库</el-radio>
          <el-radio v-model="store.change" label="sub">出库</el-radio>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="store.storage" placeholder="商品数量"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_store_show = false">取 消</el-button>
        <el-button type="primary" @click="submitStore()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="库存记录" :visible.sync="is_list_show" width="75%">
      <Storelog :pid="pid" operate="activity"></Storelog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogListClose()">取 消</el-button>
        <el-button type="primary" @click="dialogListClose()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonPage from "@/mixins/common-page";
import Edit from "@/views/activity/goods/edit.vue";
import Storelog from "@/views/goods/storelog.vue";
export default {
  mixins: [commonPage],
  components: {
    Edit,
    Storelog
  },
  props: {},
  data() {
    return {
      apiName: "activityGoods",
      backRoute: "activityIndex", //成功跳转地址
      queryForm: {
        id: "0",
        status: "",
        keyword: ""
      },
      aid: "",
      item_id: 0,
      store: {
        id: 0,
        change: "add",
        storage: 0,
        goods_title: ""
      },
      is_goods_show: false,
      is_store_show: false,
      pid: "",
      is_list_show: false
    };
  },
  methods: {
    dialogListOpen(id) {
      this.is_list_show = true;
      this.pid = id + "";
    },
    dialogListClose() {
      this.is_list_show = false;
      this.pid = "";
    },
    editGoods(id) {
      this.item_id = id;
      this.is_goods_show = true;
    },
    addGoods() {
      this.item_id = 0;
      this.$refs["goodsref"].clickSub();
    },
    submitStore() {
      let self = this;
      console.log(self.store);
      self.$api[self.apiName].changeStore(self.store).then(response => {
        if (response.code == 1) {
          self.$message({
            message: "操作成功",
            type: "success"
          });
          self.getPageData(true);
          self.is_store_show = false;
        }
      });
    },
    handleStore(id, goods_title) {
      this.is_store_show = true;
      this.store.id = id;
      this.store.change = "add";
      this.store.storage = 0;
      this.store.aid = this.aid;
      this.store.goods_title = goods_title;
      // console.log(this.store);
    },
    handleAddGoods() {
      this.is_goods_show = true;
    },
    closeAddGoods() {
      this.is_goods_show = false;
      this.getPageData(true);
    }
  },
  created() {
    if (this.$route.params.id) {
      this.queryForm.id = this.$route.params.id;
      this.aid = this.$route.params.id+"";
    }
  }
};
</script>
